<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
	<script type="text/javascript" src="tlazy.js" ></script>
	<title>LAZY</title>
<style>
#place {
	height: 500px;
	width: 500px;
	overflow: auto;
	border: 1px solid black;
}
</style>
</head>
<body>
	<div id="place">
		<div id="start">&nbsp;</div>
		<ul id="ulObj">
<?php
	for($i = 0; $i < 100; $i++)
	{
//		echo '<li>'.$i.") -- </li>\r\n";
	}
?>
		</ul>
		<div id="end">&nbsp;</div>
	</div>
</body>
<script type="text/javascript">
	var z = 100;
	var iniStart = function ()
	{
		z += 20;
		for(var i=z, c = z + 20; i < c; i++)
		{
			$('<li />').prependTo('#ulObj').text('---' + i + '---');
		}
	}

	var iniEnd = function ()
	{
		z += 20;
		for(var i=z, c = z + 20; i < c; i++)
		{
			$('<li />').appendTo('#ulObj').text('---' + i + '---');
		}
	}

$(function() {
	$('#place').tlazyload({
		start: '#start',
		startFunction: iniStart,
		end: '#end',
		endFunction: iniEnd
	});
	iniEnd();
	iniEnd();
});
</script>
</html>